<template>
     <a-modal :visible="state.visible" title="新增权限" @cancel="handleCancel" @ok="handleOk" :width="540">
        <a-form ref="formRef" :model="state.formData" :labelCol="{style:'width:100px'}">
            <a-form-item label="权限名称" name="name" :rules="[{required:true,message:'必填'}]">
                <a-input style="width: 400px;" v-model:value="state.formData.name"></a-input>
            </a-form-item>
            <a-form-item label="权限值" name="uri" :rules="[{required:true,message:'必填'}]">
                <a-input style="width: 400px;" v-model:value="state.formData.uri"></a-input>
            </a-form-item>
            <a-form-item label="页面描述" name="description">
                <a-input style="width: 400px;" v-model:value="state.formData.description"></a-input>
            </a-form-item>
        </a-form>
      </a-modal>  
</template>
<script lang="ts" setup>
import { reactive,ref,nextTick,onMounted } from "vue";
import _ from "lodash";
import { PermissionService } from "@/service";

const props = withDefaults(defineProps<{
    currentData?:any;
}>(),{
    currentData:():any=>({})
})


const state = reactive<{
    visible: boolean;
    formData:any,
}>({
    visible:true,
    formData:{
        jsonAttr:[]
    },
})
const formRef = ref();

const emit = defineEmits<{
    (e:"ok"):void,
    (e:"cancel"):void
}>()

onMounted(()=>{
    state.formData = {...props.currentData};
})


const handleCancel = ()=>{
    emit("cancel")
}

const handleOk = ()=>{
    formRef.value.validateFields().then(async(valid:boolean)=>{
        if(valid){
            let formData:any = _.cloneDeep(state.formData);
            let res 
            if(formData.id){
                res= await PermissionService.updatePermission(formData);
            }else{
                res= await PermissionService.addPermission(formData);
            }

            if(res.code===0){
                emit("ok")
            }
        }
    })
}

</script>
<style lang="less" scoped>
.json-attr-wrapper{
    display: flex;
}

.json-attr-container{
    width: 375px;
    height: 675px;
    overflow-y: auto;
    background-color: #e5e5e5;
}

.json-attr-container img{
    cursor: pointer;
}

.active-img{
    border: 2px solid #7546c9;
}
</style>